<template>
  <view class="page-index-format">
    <Loader ref="LoaderRef" />
    <Toast ref="ToastRef" />
    <RegisterMemberPopup ref="RegisterMemberPopupRef" />
    <Header class="header" text="个人中心"> </Header>
    <view class="container">
      <scroll-view class="scroll-view" scroll-y :show-scrollbar="false">
        <view class="scroll-content">
          <view class="bg"></view>
          <view class="userInfo">
            <view class="base">
              <view class="avatar"></view>
              <view class="name TextOverflow_Two">
                {{ store.isLogin.value ? store.state.user.storeName : "请登录" }}
              </view>
              <view
                class="stores"
                @click="handleChangeStore()"
                v-if="storeList.length > 1"
              >
                切换门店
              </view>
            </view>
            <view class="desc" v-if="store.isLogin.value">
              <view class="i1">
                <view class="text1">0</view><view class="text2">等级</view>
              </view>
              <view class="i2">
                <view class="text1">0</view><view class="text2">积分</view>
              </view>
              <view class="i3">
                <view class="text1">{{ store.state.walletAmount }}</view>
                <view class="text2">余额</view>
              </view>
            </view>
          </view>
          <view
            class="level"
            v-if="
              store.isLogin.value && !store.isMember.value && store.isStoreMember.value
            "
          >
            <view class="h1">会员特权</view>
            <view class="text">
              <view class="i1">加入会员，享会员权益</view>
              <view class="i2" @click="handleRegisterMember()">立即加入</view>
            </view>
            <view class="introduce">
              <view class="i1">
                <view class="bg"></view><view class="text">入会有礼</view>
              </view>
              <view class="i2">
                <view class="bg"></view><view class="text">积分兑换</view>
              </view>
              <view class="i3">
                <view class="bg"></view><view class="text">升级特权</view>
              </view>
            </view>
          </view>
          <!-- <view class="tools">
            <view class="h1">更多服务</view>
            <view class="list">
              <view class="i1">
                <view class="bg"></view><view class="text">我的卡券</view>
              </view>
              <view class="i2">
                <view class="bg"></view><view class="text">我的订单</view>
              </view>
              <view class="i3">
                <view class="bg"></view><view class="text">领券中心</view>
              </view>
              <view class="i4">
                <button
                  open-type="contact"
                  style="
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    z-index: 1;
                  "
                ></button>
                <view class="bg"></view><view class="text">联系我们</view>
              </view>
            </view>
          </view> -->
          <view class="block"></view>
        </view>
      </scroll-view>
    </view>
    <uni-popup ref="PopupRef" background-color="#fff">
      <view class="PopUpTitle">
        <view class="Btn" @click="handleSelectCancel()">取消</view>
        <view class="Text">切换门店</view>
        <view class="Btn Confirm" @click="handleSelectSure()">确定</view>
      </view>
      <view class="PopUpMultipleBox">
        <view class="Items">
          <view
            :key="index"
            v-for="(item, index) in storeList"
            :class="['Item', chooseValue === item.id ? 'active' : '']"
            @click="handleSelected(item)"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
      <Footer></Footer>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, defineExpose } from "vue";
import store from "@/store/index";
import apiUser from "@/api/user";

const ToastRef = ref();
const LoaderRef = ref();
const PopupRef = ref();
const RegisterMemberPopupRef = ref();
const chooseValue = ref();
const storeList = ref([]);

const handleRegisterMember = () => {
  RegisterMemberPopupRef.value.show();
};
const handleSelected = (item) => {
  chooseValue.value = item.id;
};
const handleSelectCancel = () => {
  PopupRef.value.close();
};
const handleChangeStore = async () => {
  chooseValue.value = store.state.qr.storeId;
  PopupRef.value.open("bottom");
};
const handleSelectSure = async () => {
  try {
    LoaderRef.value.show("切换门店中...");
    await store.login(Object.assign({ storeId: chooseValue.value }));
    store.saveQrInfo({ storeId: chooseValue.value });
    if (store.isMember.value) {
      await store.updateWalletAmount();
    } else {
      store.state.walletAmount = 0;
    }
    handleSelectCancel();
    LoaderRef.value.hide();
  } catch (err) {
    LoaderRef.value.hide(() => {
      ToastRef.value.show({ title: "抱歉", content: err });
    });
  }
};
defineExpose({
  __onPageMounted: () => {},
  __onPageLoad: (opts) => {},
  __onPageShow: () => {},
  __onPageLeave: () => {},
  __onPageEnter: async () => {
    store.isMember.value && store.updateWalletAmount();
    try {
      storeList.value = await apiUser.listStore();
    } catch (err) {
      ToastRef.value.show({ title: "抱歉", content: err });
    }
  },
});
</script>
<style scoped lang="scss">
.page-index-format {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  & > .container {
    position: relative;
    flex: 1;
    overflow: hidden;
    height: 100%;
    background: #f1f8fa;
    border-top: solid 4rpx #f3f3f3;
    & > .scroll-view {
      position: relative;
      width: 100%;
      height: 100%;
      .scroll-content {
        position: relative;
        width: 100%;

        & > .bg {
          background-image: var(--Img_My_Bg);
          background-size: cover;
          background-position: center center;
          background-repeat: no-repeat;
          height: 520rpx;
          width: 100%;
        }
        & > .userInfo {
          position: relative;
          background: #fff;
          width: 95%;
          margin: 0 auto;
          border-radius: 10rpx;
          margin-bottom: 30rpx;
          margin-top: -80rpx;
          box-shadow: 0 20rpx 20rpx -20rpx rgba(51, 51, 51, 0.1);
          padding: 30rpx 40rpx;
          box-sizing: border-box;
          & > .base {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 200rpx;
            width: 100%;
            & > .avatar {
              height: 160rpx;
              width: 160rpx;
              background-image: var(--Img_Common_User);
              background-size: 50% 50%;
              background-color: #4d4d4d;
              background-position: center center;
              background-repeat: no-repeat;
              border-radius: 50%;
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }
            & > .name {
              flex: 1;
              width: 0;
              margin-left: 25rpx;
              font-size: 32rpx;
              color: #5a5b5c;
            }
            & > .stores {
              position: absolute;
              top: -6rpx;
              right: -10rpx;
              color: #fff;
              background: var(--Main_Color);
              padding: 5rpx 20rpx;
              border-radius: 20rpx;
              font-size: 28rpx;
            }
          }
          & > .desc {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            padding: 0 30rpx;
            margin-top: 20rpx;
            box-sizing: border-box;
            & > .i1,
            & > .i2,
            & > .i3 {
              display: flex;
              flex-direction: column;
              align-items: center;
              & > .text1 {
                color: #5a5b5c;
                font-weight: bold;
                margin-bottom: 16rpx;
                font-size: 34rpx;
              }
              & > .text2 {
                color: #919293;
                font-size: 26rpx;
              }
            }
          }
        }
        & > .level {
          background: #fff;
          width: 95%;
          margin: 0 auto;
          border-radius: 10rpx;
          box-shadow: 0 20rpx 20rpx -20rpx rgba(51, 51, 51, 0.1);
          padding: 30rpx 40rpx;
          box-sizing: border-box;
          margin-bottom: 30rpx;
          & > .h1 {
            color: #5a5b5c;
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 30rpx;
          }
          & > .text {
            display: flex;
            font-size: 28rpx;
            margin-bottom: 20px;
            & > .i1 {
              flex: 1;
              color: #5a5b5c;
            }
            & > .i2 {
              color: var(--Main_Color);
            }
          }
          & > .introduce {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            & > .i1 > .bg {
              background-image: var(--Img_My_Coupon);
            }
            & > .i2 > .bg {
              background-image: var(--Img_My_Points);
            }
            & > .i3 > .bg {
              background-image: var(--Img_My_Privilege);
            }
            & > .i1,
            & > .i2,
            & > .i3 {
              display: flex;
              flex-direction: column;
              align-items: center;
              & > .bg {
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                border-radius: 50%;
                height: 80rpx;
                width: 80rpx;
                margin-bottom: 20rpx;
              }
              & > .text {
                color: #919293;
                font-size: 26rpx;
              }
            }
          }
        }

        & > .tools {
          position: relative;
          background: #fff;
          width: 95%;
          margin: 0 auto;
          border-radius: 10rpx;
          box-shadow: 0 20rpx 20rpx -20rpx rgba(51, 51, 51, 0.1);
          padding: 30rpx 40rpx;
          box-sizing: border-box;
          & > .h1 {
            color: #5a5b5c;
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 30rpx;
          }
          & > .list {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            & > .i1 > .bg {
              background-image: var(--Img_My_Coupon);
            }
            & > .i2 > .bg {
              background-image: var(--Img_My_Order);
            }
            & > .i3 > .bg {
              background-image: var(--Img_My_MoreCenter);
            }
            & > .i4 > .bg {
              background-image: var(--Img_My_Connection);
            }
            & > .i1,
            & > .i2,
            & > .i3,
            & > .i4 {
              position: relative;
              display: flex;
              flex-direction: column;
              align-items: center;
              & > .bg {
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                border-radius: 50%;
                height: 80rpx;
                width: 80rpx;
                margin-bottom: 20rpx;
              }
              & > .text {
                color: #919293;
                font-size: 26rpx;
              }
            }
          }
        }

        & > .block {
          position: relative;
          width: 100%;
          height: 100rpx;
        }
      }
    }
  }
}
</style>
